<template>
  <div class="content">
    <el-tabs  v-model="activeName" type="border-card" stretch>
      <el-tab-pane label="Baidu Map" name="BaiduMap">
        <div id="BaiduMapInstance" style="height:600px" />
      </el-tab-pane>
      
      <el-tab-pane label="Google Map" name="GoogleMap">
        <div style="height:600px">
          <iframe 
            :src="GMapLink" 
            width="100%" height="100%" 
            frameborder="0" style="border:0" />
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import BMap from "BMap"

export default {
  data() {
    return {
      activeName: "BaiduMap",
      BMap: null,
      GMapLink: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d195726.27774594375!2d116.33746632532403!3d39.958764644301226!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35f0547452fcc279%3A0x3ab09089bebfabc2!2z5YyX5Lqs6Iiq56m66Iiq5aSp5aSn5a2m5paw5Li75qW8!5e0!3m2!1sen!2sus!4v1430705789284"
    };
  },
  methods: {
     creatBMap(lon,lat) {
      this.BMap =new BMap.Map("BaiduMapInstance");
      // 初始化地图,设置中心点坐标和地图级别
      this.BMap.centerAndZoom(new BMap.Point(lon,lat), 17);
      //添加地图类型控件
      // this.BMap.addControl(new BMap.MapTypeControl({
      //   mapTypes:[
      //     BMAP_NORMAL_MAP,
      //     BMAP_HYBRID_MAP
      //   ]
      // }));
      this.BMap.setCurrentCity("北京");
      this.BMap.enableScrollWheelZoom(true);
      
      var myIcon = new BMap.Icon(
        "http://api.map.baidu.com/lbsapi/createmap/images/icon.png", 
        new BMap.Size(20, 25), {
          // offset: new BMap.Size(10, 25),
          imageOffset: new BMap.Size(-20, 3)
      });

      
      
      var marker4 = new BMap.Marker(new BMap.Point(lon,lat),{icon:myIcon});
      // 在地图上添加点标记
      this.BMap.addOverlay(marker4);

      // 创建文本标注对象
      var label = new BMap.Label(
        '信息物理网络系统实验室', 
        {
          position: new BMap.Point(lon,lat), 
          offset: new BMap.Size(30, -30) 
        }
      );
      // 自定义文本标注样式
      label.setStyle({
          color: 'blue',
          borderRadius: '5px',
          borderColor: '#ccc',
          padding: '10px',
          fontSize: '14px',
          height: '20px',
          lineHeight: '20px',
          fontFamily: '微软雅黑'
      });
      this.BMap.addOverlay(label);
    },
  },
  mounted() {
    this.creatBMap(116.49,39.880);
  }
  
};
</script>

<style lang="less" scoped>
  /deep/.el-tabs__item{font-weight: bold;font-size: 20px;}
  /deep/.el-tabs__nav-scroll{ width: 50%!important;margin: 0 auto!important; }
</style>
